<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="任务详情" />
    <!-- 任务标题 -->
    <div class="header">
      <p class="task-tit">{{ detailsData.taskTitle }}</p>
    </div>
    <!-- 任务子模块 -->
    <van-tabs :ellipsis="false" v-model="activeName" @change="onTabChange">
      <van-tab v-for="(tab, index) in tabs" :key="index" :name="tab.name">
        <template #title>
          <div class="tab-item">
            <p><van-icon :name="tab.icon" /></p>
            <p class="tab-item-title">{{ tab.title }}</p>
          </div>
        </template>
      </van-tab>
    </van-tabs>
    <section class="section">
      <!-- 基本信息 -->
      <task-details
        v-show="activeName === 'taskDetails'"
        :detailsData="detailsData"
        :pageBtns="pageBtns"
        @changeDate="onChangeDate"
        @taskStatusSet="goAddPage('taskStatusSet')"></task-details>
      <!-- 周期反馈 -->
      <task-details-feedback
        v-show="activeName === 'taskDetailsFeedback'"
        ref="taskDetailsFeedback"
        :pageBtns="pageBtns"
        :detailsData="detailsData"></task-details-feedback>
      <!-- 任务评价 -->
      <task-review v-show="activeName === 'taskReview'" ref="taskReview" :detailsData="detailsData"></task-review>
      <!-- 领导批示 -->
      <leader-approve
        v-show="activeName === 'leaderApprove'"
        ref="leaderApprove"
        :detailsData="detailsData"></leader-approve>
      <!-- 督办通知 -->
      <reminder-notice
        v-show="activeName === 'reminderNotice'"
        ref="reminderNotice"
        :detailsData="detailsData"></reminder-notice>
      <!-- 任务日志 -->
      <task-details-log
        v-show="activeName === 'taskDetailsLog'"
        ref="taskDetailsLog"
        :detailsData="detailsData"></task-details-log>
    </section>
    <div class="btn-group">
      <van-button
        v-if="pageBtns.includes('TASK_SIGN') && activeName === 'taskDetails'"
        color="#004db6"
        round
        block
        @click="onSignIn()">
        签收
      </van-button>
      <van-button
        v-if="pageBtns.includes('TASK_OPEN_EVAL') && activeName === 'taskReview'"
        color="#004db6"
        round
        block
        @click="onOpenEvaluate()">
        开启评价
      </van-button>
      <van-button
        v-if="pageBtns.includes('TASK_EVAL') && activeName === 'taskReview'"
        color="#004db6"
        round
        block
        @click="goAddPage('evaluate')">
        评价
      </van-button>
      <van-button
        v-if="pageBtns.includes('TASK_INSTRU') && activeName === 'leaderApprove'"
        color="#004db6"
        round
        block
        @click="goAddPage('leaderApprove')">
        批示
      </van-button>
      <van-button
        v-if="pageBtns.includes('TASK_SUPERVISE') && activeName === 'reminderNotice'"
        color="#004db6"
        round
        block
        @click="goAddPage('reminderNotice')">
        督办
      </van-button>
    </div>

    <!-- 修改完成时限 -->
    <van-calendar
      :max-date="new Date('2050-1-1')"
      :min-date="minDate"
      :default-date="calendarDefaultDate"
      color="#004db6"
      v-model="showCalendar"
      @confirm="onConfirmCompDate" />
    <!-- 开启评价 -->
    <open-evaluate
      :showPopup="showOpenEvalDialog"
      :detailsData="detailsData"
      @cancel="onCancel"
      @success="onOpenEvaluateSuccess"></open-evaluate>
  </div>
</template>
<script>
import moment from 'moment'
import { getTaskDetail, updateTaskCompleteTime, getRoleTaskStatus, taskSignIn } from '@api/api-task.js'

import TaskDetails from './details/TaskDetails.vue'
import TaskDetailsLog from './details/TaskDetailsLog.vue'
import LeaderApprove from './details/LeaderApprove.vue'
import ReminderNotice from './details/ReminderNotice.vue'
import TaskDetailsFeedback from './details/TaskDetailsFeedback.vue'
import TaskReview from './details/TaskReview.vue'
import OpenEvaluate from './components/OpenEvaluate.vue'
moment.locale('zh-cn')
export default {
  name: 'TaskDetail',
  components: {
    TaskDetails,
    TaskDetailsLog,
    LeaderApprove,
    ReminderNotice,
    TaskDetailsFeedback,
    TaskReview,
    OpenEvaluate,
  },
  props: {},
  data() {
    return {
      id: this.$route.query.id || this.$route.query.businessKey || this.$route.query.taskId,
      detailsData: {
        id: this.$route.query.id,
      },
      activeName: this.$route.query.activeTabsName || 'taskDetails',
      tabs: [
        {
          name: 'taskDetails',
          icon: 'newspaper-o',
          title: '基本信息',
        },
        {
          name: 'taskDetailsFeedback',
          icon: 'chat-o',
          title: '周期反馈',
        },
        {
          name: 'taskReview',
          icon: 'medal-o',
          title: '任务评价',
        },
        {
          name: 'leaderApprove',
          icon: 'records',
          title: '领导批示',
        },
        {
          name: 'reminderNotice',
          icon: 'comment-o',
          title: '督办通知',
        },
        {
          name: 'taskDetailsLog',
          icon: 'description',
          title: '任务日志',
        },
      ],
      showCalendar: false,
      calendarDefaultDate: null,
      showAuditPopup: false, // 审核
      showOpenEvalDialog: false, // 开始评价
      pageBtns: [], // 页面按钮
    }
  },
  computed: {
    minDate() {
      // 当前时间的两年前
      return new Date(new Date().getTime() - 86400000 * 30 * 24)
    },
  },
  watch: {},
  activated() {
    this.getDetail()
    this.onTabChange()
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  methods: {
    /* 跳转页面 */
    goAddPage(route) {
      if (route === 'leaderApprove') {
        this.$router.push({
          path: '/leaderApproveAdd',
          query: {
            id: this.id,
          },
        })
      } else if (route === 'reminderNotice') {
        this.$router.push({
          path: '/reminderNoticeAdd',
          query: {
            id: this.id,
          },
        })
      } else if (route === 'taskStatusSet') {
        this.$router.push({
          path: '/setTaskStatus',
          query: {
            id: this.id,
          },
        })
      } else if (route === 'evaluate') {
        this.$router.push({
          path: '/evaluateTask',
          query: {
            id: this.id,
            assessmentCycle: encodeURIComponent(this.detailsData.assessmentCycle),
          },
        })
      }
    },
    /* 签收 */
    onSignIn(clickType) {
      this.$dialog
        .confirm({
          title: '任务签收',
          message: '确定要签收当前任务？',
        })
        .then(() => {
          // on confirm
          taskSignIn({ id: this.detailsData.id }).then(res => {
            this.$toast.success('任务签收成功')
            this.getDetail()
          })
        })
    },
    /* 开启评价 */
    onOpenEvaluate() {
      this.showOpenEvalDialog = true
    },
    /* 关闭弹窗 */
    onCancel() {
      this.showOpenEvalDialog = false
    },
    /* 开启评价成功 */
    onOpenEvaluateSuccess() {
      this.onTabChange()
    },
    /* 审核成功 */
    onAuditSuccess() {
      this.onSuccess()
      this.goback()
    },
    /* 弹窗成功反馈 */
    onSuccess() {
      this.getDetail()
    },
    /* tabChange */
    onTabChange() {
      this.$nextTick(() => {
        this.$refs[this.activeName] && this.$refs[this.activeName].initdata()
      })
    },
    /* 获取任务详情 */
    getDetail() {
      this.tipsTitle = '提示'
      getTaskDetail({
        id: this.id,
      }).then(res => {
        const { data = {} } = res
        this.detailsData = data
        this.calendarDefaultDate = new Date(this.detailsData.completeTime.replace(/-/g, '/'))
        this.getRoleTaskStatus()
      })
    },
    /* 修改完成时限 */
    onChangeDate() {
      this.showCalendar = true
    },
    /* 提交修改完成时限 */
    onConfirmCompDate(value) {
      updateTaskCompleteTime({
        completeTimeNew: moment(value).format('YYYY-MM-DD'),
        completeTimeOld: this.detailsData.completeTime,
        id: this.detailsData.id,
      }).then(res => {
        const { code = 0, msg = '' } = res
        if (code === 0) {
          this.showCalendar = false
          this.$toast.success(msg)
          this.getDetail()
        }
      })
    },
    /* 获取角色@状态 */
    async getRoleTaskStatus() {
      const { data = [] } = await getRoleTaskStatus({ id: this.id })
      this.pageBtns = data
    },
    /* 返回上一页 */
    goback() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="scss" scoped>
.page_padding {
  background: #f7f7f7;
  padding-bottom: px2rem(120);
  .header {
    background: #fff;
    margin-bottom: px2rem(20);
    font-size: $fontSize30;
    padding: px2rem(32);
    color: #333;
    .task-tit {
      font-weight: 600;
    }
  }
  .section {
    // background: #fff;
    margin-top: px2rem(20);
  }
}
/deep/.van-tabs--line .van-tabs__wrap {
  height: 66px;
}
/deep/.van-tab {
  line-height: px2rem(40);
}
.tab-item {
  text-align: center;
  i {
    font-size: $fontSize60;
  }
  .tab-item-title {
    font-size: $fontSize32;
  }
}
.btn-group {
  display: flex;
  position: fixed;
  left: px2rem(20);
  bottom: px2rem(30);
  width: 95%;
  font-size: $fontSize30;
  .van-button + .van-button {
    margin-left: px2rem(10);
  }
}
.van-notice-bar {
  padding: px2rem(10);
}
</style>
